<template>
  <view class="basictitle">
    <view class="jiben">
      <view class="image">
        <view class="example-body custom-image-box">
          <uni-file-picker
            limit="1"
            :del-icon="false"
            disable-preview
            :imageStyles="imageStyles"
            file-mediatype="image"
          >
            <view class="example-image">
              <image class="photo" src="../../static/My/photo.png" mode="scaleToFill" />
              <p class="top">上传头像</p>
            </view>
          </uni-file-picker>
        </view>
      </view>
    </view>
    <view class="form">
      <uni-section>
        <view class="example">
          <!-- 基础用法，不包含校验规则 -->
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :label-width="90"
            class="custom-forms"
          >
            <uni-forms-item label="性别" class="custom-input">
              <uni-easyinput v-model="baseFormData.sex" placeholder="请选择性别" />
            </uni-forms-item>
            <uni-forms-item label="昵称">
              <uni-easyinput v-model="baseFormData.nickname" placeholder="请输入昵称" />
            </uni-forms-item>
            <uni-forms-item label="生日">
              <uni-datetime-picker
                type="date"
                return-type="timestamp"
                :clear-icon="false"
                v-model="baseFormData.datetimesingle"
                @maskClick="maskClick"
              />
            </uni-forms-item>
            <uni-forms-item label="工作地区">
              <uni-easyinput v-model="baseFormData.workingarea" placeholder="选择工作地区" />
            </uni-forms-item>
            <uni-forms-item label="户籍地区">
              <uni-easyinput v-model="baseFormData.domicile" placeholder="请选择户籍地区" />
            </uni-forms-item>
            <uni-forms-item label="婚姻状况">
              <uni-easyinput v-model="baseFormData.marriage" placeholder="请选择婚姻状况" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
    <view class="segmentation"></view>
    <view class="footer-form">
      <uni-section>
        <view class="example">
          <!-- 基础用法，不包含校验规则 -->
          <uni-forms
            ref="baseForm"
            :modelValue="baseFormData"
            :label-width="90"
            class="custom-forms"
          >
            <uni-forms-item label="身高" class="custom-input">
              <uni-easyinput v-model="baseFormData.height" placeholder="请输入身高" />
            </uni-forms-item>
            <uni-forms-item label="体重">
              <uni-easyinput v-model="baseFormData.weight" placeholder="请输入体重" />
            </uni-forms-item>
            <uni-forms-item label="学历">
              <uni-easyinput v-model="baseFormData.education" placeholder="请输入学历" />
            </uni-forms-item>
            <uni-forms-item label="月收入">
              <uni-easyinput v-model="baseFormData.income" placeholder="请输入收入" />
            </uni-forms-item>
            <uni-forms-item label="职业">
              <uni-easyinput v-model="baseFormData.career" placeholder="请输入职业" />
            </uni-forms-item>
          </uni-forms>
        </view>
      </uni-section>
    </view>
    <view class="station"></view>
    <view class="footer-button">
      <button
        style="background-image: linear-gradient(to right, #40ade3, #90cde7); border-radius: 40rpx"
      >
        下一步(1)
      </button>
    </view>
  </view>
</template>
<script setup lang="ts">
import { reactive } from 'vue'

const imageStyles = reactive({
  width: '170rpx',
  height: '170rpx',
  border: {
    radius: '50%',
    color: '#c2ebf0',
    style: 'Dashed',
    width: '6rpx',
  },
})

interface baseFormDataFace {
  sex: string
  nickname: string
  datetimesingle: string
  workingarea: string
  domicile: string
  marriage: string
  weight: string
  income: string
  career: string
  height: string
  education: string
}

// 基础表单数据
const baseFormData = reactive<baseFormDataFace>({
  sex: '',
  nickname: '',
  datetimesingle: '',
  workingarea: '',
  domicile: '',
  marriage: '',
  weight: '',
  income: '',
  career: '',
  height: '',
  education: '',
})

// 日期事件
const maskClick = (e) => {
  console.log('maskClick事件:', e)
}
</script>

<style lang="scss" scoped>
.basictitle {
  width: 100%;
  height: 90vh;

  .jiben {
    width: 100%;
    height: 12%;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    .custom-image-box {
      width: 100%;
      /* #ifndef APP-NVUE */
      display: flex;
      /* #endif */
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: #f2fafc;
      border-radius: 50%;

      .example-image {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
    }

    .photo {
      width: 10vw;
      height: 11vw;
      text-align: center;
    }

    .top {
      display: flex;
      flex-direction: column;
      font-size: 12px;
      text-align: center;
      color: #60cad8;
    }
  }

  .segmentation {
    width: 100vw;
    height: 1%;
    padding: 0 3%;
    background-color: #f5f5f5;
    margin-left: -3%;
  }

  .station {
    height: 2%;
  }

  .footer-button {
    position: sticky;
    bottom: 2%;
    left: 0;
    right: 0;
    margin: auto;
    z-index: 1;

    button {
      color: #fff;
    }
  }
}

.warp {
  padding: 10px;
}

.button {
  margin-bottom: 10px;
}
</style>
